<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>高清测试页面</title>
        <style>
            body { 
                margin: 0; 
                padding: 0; 
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                font-family: 'Arial', sans-serif;
            }
            
            .container {
                text-align: center;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-radius: 20px;
                padding: 40px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            }
            
            h1 {
                color: white;
                font-size: 48px;
                margin-bottom: 30px;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            
            .animation-container {
                position: relative;
                display: inline-block;
            }
            
            svg {
                filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
            }
            
            .text {
                color: white;
                font-size: 24px;
                margin-top: 20px;
                opacity: 0;
                animation: fadeIn 2s ease-in-out 1s forwards;
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .circle {
                width: 100px;
                height: 100px;
                border: 3px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                animation: pulse 3s ease-in-out infinite;
            }
            
            @keyframes pulse {
                0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
                50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.1; }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>高清视频测试</h1>
            <div class="animation-container">
                <div class="circle"></div>
                <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
                    <!-- 渐变定义 -->
                    <defs>
                        <linearGradient id="triangleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
                            <stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
                        </linearGradient>
                        <filter id="glow">
                            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                            <feMerge> 
                                <feMergeNode in="coloredBlur"/>
                                <feMergeNode in="SourceGraphic"/>
                            </feMerge>
                        </filter>
                    </defs>
                    
                    <!-- 旋转的三角形 -->
                    <polygon points="150,50 250,250 50,250" 
                             fill="url(#triangleGradient)" 
                             stroke="#ffffff" 
                             stroke-width="4"
                             filter="url(#glow)">
                        <animateTransform attributeName="transform" 
                                        attributeType="XML" 
                                        type="rotate" 
                                        from="0 150 150" 
                                        to="360 150 150" 
                                        dur="10s" 
                                        repeatCount="indefinite" />
                    </polygon>
                    
                    <!-- 中心圆点 -->
                    <circle cx="150" cy="150" r="8" fill="#ffffff" opacity="0.8">
                        <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/>
                    </circle>
                </svg>
            </div>
            <div class="text">WebVideoCreator 高清测试</div>
        </div>
    </body>
</html>